<template>
    <div style="margin-bottom: -2rem;height: 100vh;">
        <div class="box">
            <div class="search">
                <input type="text" placeholder="搜索订单（订单编号）">
            </div>
            <div class="nav">
                <li>全部</li>
                <li>待付款</li>
                <li>待发货</li>
                <li>待收货</li>
                <li>待评价</li>
            </div>
            <div class="content">
                <li class="item" v-for="(item,i,index) in goodsMap" :key="i">
                    <div class="title">
                        <span>订单编号：{{orderList[index].orderNumber}}</span>
                        <span style="color:#1ba784">{{orderList[index].statusStr}}</span>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <img :src="item[0].pic">
                            <div class="info-text">
                                <p>{{item[0].goodsName}}</p>
                                <p style="font-size:.48rem;color:#969799;">{{item[0].property}}</p>
                            </div>
                        </div>
                        <div class="info-right">
                            <p style="font-size: .56rem;">￥{{item[0].amount}}</p>
                            <p style="text-align:right;color:#969799;font-size: .48rem;">x{{item[0].number}}</p>
                        </div>
                    </div>
                    <div class="sum">
                        <p>
                            <span>共{{item[0].number}}件商品&nbsp;</span>
                            <span>实付款：￥</span>
                            <span style="font-size:.72rem;font-weight: 700;">{{item[0].amount}}</span>
                            <span>.00</span>
                        </p>
                    </div>
                    <div class="btns">
                        <!-- <button>删除订单</button> -->
                        <button>
                            <van-icon name="service" />
                            <span>联系客服</span>
                        </button>
                    </div>
                </li>
                <div class="more">没有更多了</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: [],
            orderList: "",
            goodsMap: "",
            data: ""
        }
    },
    mounted() {
        this.request({
            method: "post",
            url: "/order/list",
            params: {
                status: ""
            }
        }).then(res => {
            this.data = res.data
            this.orderList = this.data.orderList
            this.goodsMap = this.data.goodsMap
            this.orderList.forEach(item => {
                this.id.push(item.id)
            });
            console.log(res)
        })
    }
}
</script>

<style scoped>
.more{
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color: #969799;
    font-size: .56rem;
}

.box {
    background-color: #f7f8fa;
    height: 100vh;
    overflow: auto;
}

.search {
    padding: .4rem .48rem;
    border-bottom: 1px solid #ebedf0;
    background-color: #fff;
}

.search input {
    width: 14.04rem;
    height: 1.36rem;
    font-size: .56rem;
    border-radius: .68rem;
    border: none;
    outline: none;
    /* background: url('../assets/images/搜索@2x.png') .64rem no-repeat; */
    background-color: #f7f8fa;
    text-indent: 1.5rem;
}

.nav {
    height: 1.76rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

.nav li {
    width: 20%;
    text-align: center;
    font-size: .56rem;
}

.content {
    margin-top: 0.4rem;
    padding: 0 .4rem;

}

.content .item {
    padding: 0 .48rem;
    background-color: #fff;
    border-radius: .32rem;
    margin: .4rem 0;
}

.content .item .title {
    height: 1.52rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .56rem;
}

.content .item .info {
    display: flex;
    justify-content: space-between;
    padding: .48rem;
    border-top: 1px solid #ebedf0;
    border-bottom: 1px solid #ebedf0;
}

.content .item .info .info-left {
    display: flex;
}

.content .item .info .info-left>img {
    width: 2.88rem;
    height: 2.88rem;
    margin-right: .32rem;
}

.content .item .info .info-left .info-text p {
    font-size: .56rem;
    margin-bottom: .32rem
}

.content .item .sum {
    line-height: 1.92rem;
    text-align: right;
    font-size: .48rem;
    border-bottom: 1px solid #ebedf0;
}

.content .item .btns {
    height: 1.68rem;
    text-align: right;
    padding: .2rem 0;
}

.content .item .btns button {
    width: 3.76rem;
    height: 1.28rem;
    border-radius: .64rem;
    border: 1px solid #ebedf0;
    background-color: #fff;
    font-size: .56rem;
    padding: .32rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: right;
}
</style>